<template>
  <div class="main-container">
    <div class="flex">
      <div class="main-left flex-1">
        <div class="page-title">
          标签：{{tag.name}}
        </div>
        <div class="post-box" v-for="(item, index) in posts" :key="index">
          <div class="post-top mb-2">
            <el-image
              class="top-img"
              :src="item.articleInfor.thumbnail" lazy></el-image>
            <div class="position-absolute post-title">
              {{item.title.rendered}}
            </div>
          </div>
        </div>
      </div>
      <div class="main-right">
        <RightIndex></RightIndex>
      </div>
    </div>
  </div>
</template>

<script>
  import {getPostList} from "@/api/post";
  import {getTagDes} from "@/api/tag";
  import RightIndex from "@/components/RightIndex";
  import {mapState} from 'vuex'

  export default {
    layout: 'page',
    head() {
      return {
        title: `${this.tag.name} | ${this.info.blogName}`,
      }
    },
    async asyncData({ app, params, error, store }) {
      const id = params.id
      const posts = await app.$axios.$request(getPostList({
        page: 1,
        per_page: 10,
        tags: id
      }))
      const tag = await app.$axios.$request(getTagDes(id))
      return {
        posts,
        tag
      }
    },
    computed: {
      ...mapState(['info'])
    },
    components: {
      RightIndex
    }
  }
</script>

<style scoped>

</style>
